<template>
  <div class='container'>目录管理
    <el-card>
      <!-- 筛选表单区域 -->
      <div class="flex-box">
        <div>
          <el-form label-width="80px"
                   inline
                   size="small">
            <el-form-item label="目录名称">
              <el-input v-model="query.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="query.state"
                         placeholder="请选择">
                <el-option :value='1'
                           label="启用">
                </el-option>
                <el-option :value='0'
                           label="禁用">
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 重新提交 -->

            <el-form-item>
              <el-button @click="onCancel">取消</el-button>

            </el-form-item>
            <el-form-item>
              <el-button type="primary"
                         @click="onSumit">搜索</el-button>
            </el-form-item>

          </el-form>
        </div>
        <div>
          <el-button type="text"
                     @click="$router.push('/subjects/list')"
                     label="right"><i class="el-icon-wind-power"></i>&nbsp;返回学科</el-button>
          <el-button type="success"
                     label="right"
                     size="small"
                     @click="handleCreate"><i class="el-icon-edit"></i>新增目录</el-button>
        </div>

      </div>
      <el-alert :title="`总共${total}条数据`"
                type="info"
                effect="light"
                show-icon
                closable></el-alert>

      <!-- 表单区域 -->
      <!-- :data="list" -->
      <el-table :data="directoryList"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="序号">
        </el-table-column>
        <el-table-column prop="subjectName"
                         label="所属学科">
        </el-table-column>
        <el-table-column prop="directoryName"
                         label="目录名称">
        </el-table-column>
        <el-table-column prop="username"
                         label="创建者">
        </el-table-column>
        <el-table-column prop="addDate"
                         label="创建日期">
          <template slot-scope="scope">
            {{scope.row.addDate|parseTimeByString}}
          </template>
        </el-table-column>
        <el-table-column prop="totals"
                         label="面试题数量">
        </el-table-column>
        <el-table-column prop="state"
                         label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state===1">启用</span>

            <span v-else>禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button type="text"
                       v-if="scope.row.state===1"
                       @click="newState(scope.row,0)">启用</el-button>
            <el-button type="text"
                       v-if="scope.row.state===0"
                       @click="newState(scope.row,1)">禁用</el-button>
            <el-button type="text"
                       :disabled="scope.row.state===1"
                       @click="editCreate(scope.row)">修改</el-button>
            <el-button type="text"
                       :disabled="scope.row.state===1"
                       @click="deleteById(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <page-tool @pageChange="pageChange"
                 :total="total"
                 @pageSizeChange="pageSizeChange" />

      <!-- 新增弹框-->

      <directorys-add :directoryList="directoryList"
                      :parentList="parentList"
                      v-bind:is="DirectorysAdd"
                      @close="handClose"
                      @newDataes="newAddList"
                      @handClose="handClose"
                      @getDirectoryList="getDirectoryList"
                      @subClose="handClose"
                      ref="editMenu"></directorys-add>

      <!-- 修改弹框 -->

      <!-- 预览弹框 -->
    </el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import DirectorysAdd from '@/module-hmmm/components/directorys-add'
import PageTool from '@/module-dashboard/components/pageTool'
export default {
  components: { DirectorysAdd, PageTool },
  data () {
    return {
      DirectorysAdd: 'directorysAdd',
      query: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },
      directoryList: [],
      total: 0,
      parentList: []
      //   isEdit: false
    }
  },
  methods: {
    //   获取目录的列表数据
    getDirectoryList () {
      list({
        page: this.query.page,
        pagesize: this.query.pagesize,
        directoryName: this.query.directoryName
      }).then(data => {
        console.log(data.data.counts)
        this.total = data.data.counts
        this.directoryList = data.data.items
      })
    }, // 点击取消按钮 清空输入框内的内容
    onCancel () {
      this.query.directoryName = ''
      this.query.state = null
      this.getDirectoryList()
    }, // 点击搜索来搜索
    onSumit () {
      this.query.page = 1
      this.getDirectoryList()
    },
    // 编辑修改 表单详情数据加载
    editCreate (row) {
      // 打开弹窗
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.isEdit = true
      this.$refs.editMenu.hanldeEditForm(row.id)
    },
    // 子组件的自定义 事件打开弹窗事件
    handleCreate () {
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.isEdit = false
      // 当点击取消是 如果输入框内有值 就重置表单
      this.$refs.editMenu.handleResetForm()
    }, // 子组件的自定义是事件 关闭弹窗事件
    handClose () {
      this.$refs.editMenu.dialogFormH()
    }, // 子组件的提交追加数据事件
    newAddList () {
      //   console.log(parameters)
      //   this.directoryList.unshift(parameters)
      this.getDirectoryList()
    }, // 改变启用禁用的状态
    async newState (row, num) {
      console.log(row.id, num)

      await changeState({
        id: row.id,
        state: num
      }).then(() => {
        this.getDirectoryList()
      })
    }, // 改变页码值的变化
    pageChange (page) {
      this.query.page = page

      this.getDirectoryList()
    }, // 监听每页数变化
    pageSizeChange (pagesize) {
      this.query.pagesize = pagesize
      //   console.log(this.query.pagesize)

      this.getDirectoryList()
    }, // 点击删除事件
    deleteById (id) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          remove({ id })
            .then(response => {
              this.$message.success('成功删除了用户' + '!')
              this.directoryList.splice(id, 1)
              this.getDirectoryList()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  },

  created () {
    this.getDirectoryList()
  }
}
</script>

<style  >
.container {
  padding: 10px;
}
.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
